<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <div id="root">
        <!-- prevent：阻止默认事件 -->
        <a href="http://www.baidu.com" @click="test1()">点击跳转</a>
        <a href="http://www.baidu.com" @click.prevent="test2()">点击不跳转</a>

        <!-- stop：阻止冒泡事件 -->
        <div @click="test5()" class="hhm_div">
            <button @click="test3()">测试冒泡的事件</button>
            <button @click.stop="test4()">测试冒泡的事件，阻止冒泡</button>
        </div>

        <!-- once：事件只触发一次 -->
        <button @click.once="test6()">只触发一次</button>

        <!-- capture：使用事件的捕获模式 -->
        <div @click.capture="test5()" class="hhm_div">
            <button @click="test6()">测试捕获模式</button>
        </div>

        <!-- self：只有e.target是自身的时候，才会触发事件 -->
        <div @click.self="test5" class="hhm_div">
            <button @click="test6">测试self</button>
        </div>

        <!-- passive：事件的默认行为立即执行，无需等待事件回调执行完毕 -->
        <div>滚动条</div>
        <ul @scroll="test1">
            <li>啦啦啦</li>
            <li>啦啦啦</li>
            <li>啦啦啦</li>
            <li>啦啦啦</li>
        </ul>

        <div>鼠标滚轮</div>
        <ul @wheel="test1">
            <li>啦啦啦</li>
            <li>啦啦啦</li>
            <li>啦啦啦</li>
            <li>啦啦啦</li>
        </ul>

        <div>鼠标滚轮+passive</div>
        <ul @wheel.passive="test1">
            <li>啦啦啦</li>
            <li>啦啦啦</li>
            <li>啦啦啦</li>
            <li>啦啦啦</li>
        </ul>
    </div>

</body>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
        },
        methods: {
            test1() {
                console.log("触发了1#")
                for(let i=1; i< 50000; i++){
                    console.log(i)
                }
            },
            test2() {
                console.log("点击了2#")
            },
            test3() {
                console.log("点击了3#")
            },
            test4() {
                console.log("点击了4#")
            },
            test5(e) {
                console.log("点击了5#", e.target)
            },
            test6(e) {
                console.log("点击了6#", e.target)
            },
        }
    });

    Vue.config.productionTip = false  //阻止 vue 在启动时生成生产提示。
</script>

</html>
<style>
    * {
        margin-top: 10px;
    }

    ul {
        height: 150px;
        background-color: antiquewhite;
        overflow: auto;
    }

    li {
        height: 50px;
        background-color: pink;
    }

    .hhm_div {
        background-color: aqua;
    }
</style>